<%@ page language="java" pageEncoding="UTF-8" %>
<!doctype html>
<html lang="zh-CN">
<head>
    <%@include file="/WEB-INF/views/commons/common.jsp" %>
    <link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css"
          href="${base_href}/static/ui-frame/bootstrap-dialog3/css/bootstrap-dialog.css">
    <link rel="stylesheet" type="text/css"
          href="${base_href}/static/ui-frame/validation-engine/validationEngine.jquery.css">
    <link rel="stylesheet" type="text/css"
          href="${base_href}/static/ui-frame/jquery-easyui/1.4.3/themes/metro/easyui.css">
    <link rel="stylesheet" type="text/css"
          href="${base_href}/static/ui-frame/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/bootstrap/3.3.5/css/build.css">

    <link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/webuploader/0.1.5/webuploader.css">
    <link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/viewer/viewer.css">
    <link rel="stylesheet" type="text/css" href="${base_href}//static/ui-frame/ztree-v3/css/zTreeStyle/zTreeStyle.css">

    <link rel="stylesheet" type="text/css" href="${base_href}/static/css/search-theme.css">
    <link rel="stylesheet" type="text/css" href="${base_href}/static/css/form-theme.css">
    <link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/layui-v2.3.0/layui/css/layui.css">

    <title>题目详细信息</title>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="350">


<div class="main-wrap">

    <!-- 工具条 start-->
    <div class="container-fluid form-body-header">
        <div class="container">
            <div class="row tool-bar">
                <div class="col-xs-12">
                    <button type="button" class="btn btn-sm tool-btn" id="saveBtn">保存题目</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 工具条 end-->

    <!-- 表单 start-->
    <div class="container-fluid">
        <form id="form">
            <input type="hidden" name="question.id" value="${form.question.id }"/>
            <input type="hidden" name="question.quesSource" value="1"/>

            <div class="container form-body-div">
                <div class="row text-center title-body" id="baseinfo">
                    题目详细信息<br/>
                </div>

                <div class="row pannel-title">
                    <span>基本信息</span> <a href="javascript:void(0);" class="hide-next-btn">收起</a>
                </div>
                <div class="row pannel-body">
                    <table class="form-table">
                        <tr>
                            <th class="col-xs-2 ">题目编号</th>
                            <td class="col-xs-4">
                                <input type="text" class="form-control validate[required]" name="question.quesCode"
                                       value="${form.question.quesCode}"/>
                            </td>
                            <th class="col-xs-2 ">题目类型</th>
                            <td class="col-xs-4">
                                <select name="question.quesType" class="form-control validate[required]">
                                    <option value="" selected="selected">请选择</option>
                                    <c:forEach items="${quesTypes}" var="state">
                                        <option value="${state.dicCode}"
                                                <c:if test="${form.question.quesType eq state.dicCode }">selected="selected"</c:if>
                                        >${state.dicValue}</option>
                                    </c:forEach>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <th class="col-xs-2 ">创建时间</th>
                            <td class="col-xs-4" colspan="3">
                                <fmt:formatDate value="${form.question.createTime}" type="both"
                                                pattern="yyyy-MM-dd HH:mm:ss"/>
                            </td>
                        </tr>
                        <tr>
                            <th class="col-xs-2 ">主题干信息</th>
                            <td class="col-xs-4" colspan="3">
									<textarea class="form-control validate[required,maxSize[1000]]"
                                              data-errormessage-value-missing="请填写题目信息"
                                              data-errormessage-range-overflow="题目信息长度不能超过1000个字" rows="5"
                                              name="question.question"
                                              placeholder="请填写题目信息">${form.question.question}</textarea>
                                <button type="button" class="layui-btn" id="questionUpload">
                                    <i class="layui-icon">&#xe67c;</i>上传题目图片
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <th class="col-xs-2 ">分题干信息</th>
                            <td class="col-xs-4" colspan="3">
									<textarea class="form-control validate[required,maxSize[1000]]"
                                              data-errormessage-value-missing="请填写题干信息"
                                              data-errormessage-range-overflow="题干信息长度不能超过1000个字" rows="5"
                                              name="question.stem"
                                              placeholder="请填写题干信息">${form.question.stem}</textarea>
                            </td>
                        </tr>

                        <tr>
                            <th class="col-xs-2 ">选项A</th>
                            <td class="col-xs-4" colspan="3">
                                <input type="text" class="form-control validate[required]" name="question.optionA"
                                       value="${form.question.optionA}"/>
                            </td>
                        </tr>
                        <tr>
                            <th class="col-xs-2 ">选项B</th>
                            <td class="col-xs-4" colspan="3">
                                <input type="text" class="form-control validate[required]" name="question.optionB"
                                       value="${form.question.optionB}"/>
                            </td>
                        </tr>
                        <tr>
                            <th class="col-xs-2 ">选项C</th>
                            <td class="col-xs-4" colspan="3">
                                <input type="text" class="form-control validate[required]" name="question.optionC"
                                       value="${form.question.optionC}"/>
                            </td>
                        </tr>
                        <tr>
                            <th class="col-xs-2 ">选项D</th>
                            <td class="col-xs-4" colspan="3">
                                <input type="text" class="form-control validate[required]" name="question.optionD"
                                       value="${form.question.optionD}"/>
                            </td>
                        </tr>
                        <tr>
                            <th class="col-xs-2 ">选项E</th>
                            <td class="col-xs-4" colspan="3">
                                <input type="text" class="form-control" name="question.optionE"
                                       value="${form.question.optionE}"/>
                            </td>
                        </tr>
                        <tr>
                            <th class="col-xs-2 ">选项F</th>
                            <td class="col-xs-4" colspan="3">
                                <input type="text" class="form-control" name="question.optionF"
                                       value="${form.question.optionF}"/>
                            </td>
                        </tr>
                        <tr>
                            <th class="col-xs-2 ">正确选项</th>
                            <td class="col-xs-4" colspan="3">
                                <c:if test="${form.question.quesType eq '4' }">
                                    <c:forEach items="${answers }" var="option" varStatus="optionStatus">
                                        <div class="checkbox checkbox-success checkbox-inline">
                                            <input type="checkbox" name="question.answer"
                                                   <c:if test="${fn:contains(form.question.answer,option)}">checked="checked"</c:if>
                                                   id="myAnswer['${optionStatus.index }']" value="${option }">
                                            <label for="myAnswer['${optionStatus.index }']">
                                                    ${option}
                                            </label>
                                            &nbsp;&nbsp;&nbsp;&nbsp;
                                        </div>
                                    </c:forEach>
                                </c:if>
                                <c:if test="${form.question.quesType ne '4' }">
                                    <c:forEach items="${answers }" var="option" varStatus="optionStatus">
                                        <div class="checkbox checkbox-success checkbox-inline">
                                            <input type="radio" name="question.answer"
                                                   <c:if test="${option eq form.question.answer}">checked="checked"</c:if>
                                                   id="myAnswer['${optionStatus.index }']" value="${option }">
                                            <label for="myAnswer['${optionStatus.index }']">
                                                    ${option}
                                            </label>
                                        </div>
                                    </c:forEach>
                                </c:if>
                            </td>

                        </tr>
                        <tr>
                            <th class="col-xs-2 relationCode">关联关系值</th>
                            <td class="col-xs-4">
                                <input type="text" class="form-control validate[required]" name="question.relationCode"
                                       value="${form.question.relationCode}"/>
                            </td>
                            <th class="col-xs-2"></th>
                            <td class="col-xs-4">
                            </td>
                        </tr>
                        <tr>
                            <th class="col-xs-2 ">答案解析</th>
                            <td class="col-xs-4" colspan="3">
									<textarea class="form-control validate[maxSize[1000]]"
                                              data-errormessage-value-missing="请填写答案解析"
                                              data-errormessage-range-overflow="题目信息长度不能超过1000个字" rows="5"
                                              name="question.analysis"
                                              placeholder="请填写答案解析">${form.question.analysis}</textarea>
                                <button type="button" class="layui-btn" id="analysisUpload">
                                    <i class="layui-icon">&#xe67c;</i>上传解析图片
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <th class="col-xs-2 ">大纲</th>
                            <td class="col-xs-4" colspan="3">
                                <c:forEach items="${form.outlines}" var="state" varStatus="status">
                                    <input type="hidden" name="outlines[${status.index}].id" value="${state.id }"/>
                                    <div class="pre-div">&nbsp;&nbsp;&nbsp;&nbsp;${state.contents}</div>
                                </c:forEach>
                                <button type="button" class="layui-btn" id="addOutline">
                                    <i class="layui-icon">&#xe67c;</i>选择大纲
                                </button>
                            </td>
                        </tr>
                    </table>
                </div>

            </div>
        </form>
    </div>
    <!-- 表单 end-->

</div>
<script type="text/javascript" src="${base_href}/static/ui-frame/jquery/1.11.3/jquery.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/bootstrap/3.3.5/js/bootstrap.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/bootstrap-dialog3/js/bootstrap-dialog.js"></script>
<script type="text/javascript"
        src="${base_href}/static/ui-frame/validation-engine/jquery.validationEngine-zh_CN.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/validation-engine/jquery.validationEngine.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/My97DatePicker/WdatePicker.js"></script>

<script type="text/javascript" src="${base_href}/static/ui-frame/ztree-v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="${base_href}/static/support/question/outline-tree.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/layer/layer.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/layui-v2.3.0/layui/layui.js"></script>
<script type="text/javascript" src="${base_href}/static/support/question/question-attach-edit.js"></script>
<script type="text/javascript" src="${base_href}/static/support/question/question-edit.js"></script>

<script type="text/javascript">
    $(function () {
        $('#form').validationEngine('attach', {
            maxErrorsPerField: 1,
            scroll: false,
            validationEventTrigger: "keyup blur change focus",
            ValidateNoneVisibleFields: true,//验证隐藏域
            promptPosition: "topRight" //验证弹出框的位置，topRight,topLeft,bottomRight,bottomLeft,centerRight,centerLeft,inline
        });

        $("#saveBtn").click(function () {
            if ($("input[name='paperName']").validationEngine('validate')) {
                var quesType = $("select[name='question.quesType']").val();
                if (quesType != 2 && quesType != 3) {
                    $("input[name='question.relationCode']").val("");
                }
                if (quesType != 2) {
                    $("textarea[name='question.stem']").val("");
                }
                return $.post(basePath + "/question/saveQuestion.json", $("#form").serialize(), function () {
                    BootstrapDialog.show({
                        title: "提示框",
                        message: "保存成功",
                        buttons: [{
                            label: "确认",
                            action: function (dialog) {
                                dialog.close();
                            }
                        }]
                    });
                }, 'json')
                    .error(function (a, b, c) {
                        var message = a.responseText;
                        if (a.responseText.indexOf("Duplicate entry") > -1) {
                            var start = a.responseText.indexOf("Duplicate entry");
                            var end = a.responseText.indexOf("ques_code");
                            end = end + 13;
                            message = a.responseText.substring(start, end);
                        }
                        BootstrapDialog.show({
                            title: "保存失败",
                            message: message,
                            buttons: [{
                                label: "确认",
                                action: function (dialog) {
                                    dialog.close();
                                }
                            }]
                        });

                    });
            }
        });

        $("#addOutline").click(function () {
            //初始化大纲
            OutlineApp.Tree.selectOutLine({
                multi: true,
                selectData: new Array(),
                currentTreeId: "treeDemo",
                selectType: "checkbox"
            });
            addOutline();
        });

        function addOutline() {
            var html =
                '<table class="form-table">' +
                '<tr>' +
                '<th class="col-xs-4">大纲选择树</th>' +
                '<th class="col-xs-4">候选题目列表</th>' +
                '</tr>' +
                '<tr>' +
                '<td class="col-xs-4">' +
                '<div title="" class="panel-body layout-body"' +
                'style="overflow-x:scroll; width: 245px; height: 480px; border: none; padding: 2px 5px 5px;"' +
                'data-options="region:\'center\',title:\'候选题目 | 任意选择\'">' +
                '<ul id="treeDemo" class="ztree" style="width: 100%;height:500px;"></ul>' +
                '</div>' +
                '</td>' +
                '<td class="col-xs-4">' +
                '<div class="tree_s_box" style="overflow-x:scroll; width: 245px; height: 480px;">' +
                '<ul class="treeSelected" id="treeDemoSelected" style="width: 100%; white-space: nowrap;height:500px;">' +
                '</ul>' +
                '</div>' +
                '</td>' +
                '</tr>' +
                '</table>';

            layer.open({
                btn: ['确定', '取消'],
                type: 1,
                title: '添加操作日志',
                shadeClose: true,
                shade: 0.8,
                area: '541px',
                content: html,
                yes: function (index, layero) {

                    $("#addOutline").prevAll().remove();
                    var i = 0;
                    $("#treeDemoSelected").find("li").each(function (index, domEle) {
                        var outlineId = $(domEle).children().attr("outlineId");
                        var content = $(domEle).children().first().html();
                        var html =
                            '<input type="hidden" name="outlines[' + i + '].id" value="' + outlineId + '" />' +
                            '<div class="pre-div">&nbsp;&nbsp;&nbsp;&nbsp;' + content + '</div>';
                        $("#addOutline").before(html);
                        i++;
                    });
                    layer.close(index);
                },
                btn2: function (index, layero) {
                    //return false 开启该代码可禁止点击该按钮关闭
                }
            })
        }

    });
</script>
</body>
</html>
